<template>
    <div class="box">
        <el-card>
            <template #header>
                <h3>店铺审核</h3>
            </template>
            <!-- 搜索区域 -->
            <el-form inline :model="shopData">
                <el-form-item label="店铺名称">
                    <el-input v-model="shopData.shopName"></el-input>
                </el-form-item>
                <el-form-item label="店铺状态">
                    <el-select v-model="shopData.status" style="width: 200px">
                        <el-option label="未审核" value="0"></el-option>
                        <el-option label="已审核" value="1"></el-option>
                        <el-option label="营业" value="2"></el-option>
                        <el-option label="歇业" value="3"></el-option>
                        <el-option label="违规" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadShopList">搜索</el-button>
                </el-form-item>
            </el-form>
            <!-- 数据区域 -->
            <el-table :data="tableData" border>
                <el-table-column type="expand">
                    <template #default="props">
                        <el-descriptions :column="2" border>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">店铺名称</div>
                                </template>
                                {{ props.row.shopName }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">店铺地址</div>
                                </template>
                                {{ props.row.shopAddress }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">店铺图片</div>
                                </template>
                                <img :src="props.row.shopImg" alt="" width="150" />
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">店铺介绍</div>
                                </template>
                                {{ props.row.shopExplain }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">店铺分类</div>
                                </template>
                                {{ props.row.shopCategoryId }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">配送费</div>
                                </template>
                                {{ props.row.deliveryPrice }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">起送费</div>
                                </template>
                                {{ props.row.startPrice }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">店铺状态</div>
                                </template>
                                <el-tag v-if="props.row.status == 0" type="danger">
                                    未审核
                                </el-tag>
                                <el-tag v-else-if="props.row.status == 1" type="success">
                                    已审核
                                </el-tag>
                                <el-tag v-else-if="props.row.status == 2" type="primary">
                                    营业
                                </el-tag>
                                <el-tag v-else-if="props.row.status == 3" type="info">
                                    歇业
                                </el-tag>
                                <el-tag v-else-if="props.row.status == 4" type="warning">
                                    违规
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">营业时间</div>
                                </template>
                                {{ props.row.startTime }} - {{ props.row.endTime }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </template>
                </el-table-column>
                <el-table-column prop="shopName" label="店铺名称"></el-table-column>
                <el-table-column prop="shopAddress" label="店铺地址"></el-table-column>
                <el-table-column prop="shopExplain" label="店铺介绍"></el-table-column>
                <el-table-column prop="startPrice" label="起送费" width="80"></el-table-column>
                <el-table-column prop="deliveryPrice" label="配送费" width="80"></el-table-column>
                <el-table-column label="营业时间" width="240">
                    <template #default="scope">
                        {{ scope.row.startTime }} - {{ scope.row.endTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="店铺状态" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 0" type="danger">未审核</el-tag>
                        <el-tag v-else-if="scope.row.status == 1" type="success">
                            已审核
                        </el-tag>
                        <el-tag v-else-if="scope.row.status == 2" type="primary">
                            营业
                        </el-tag>
                        <el-tag v-else-if="scope.row.status == 3" type="info">歇业</el-tag>
                        <el-tag v-else-if="scope.row.status == 4" type="warning">
                            违规
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="success" @click="handleAudit(scope.row)" size="small"
                            v-if="scope.row.status == 0">
                            审核
                        </el-button>
                        <el-button type="primary" @click="handleEdit(scope.row)" size="small"
                            v-else-if="scope.row.status == 1">
                            退审
                        </el-button>
                        <el-button type="danger" @click="handleFoul(scope.row)" size="small"
                            v-else-if="scope.row.status == 2">
                            违规停业
                        </el-button>
                        <el-button type="danger" size="small" v-else-if="scope.row.status == 4">
                            通知商家整改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <template #footer>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[2, 3, 5, 10]" layout="total, sizes,  prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </template>
        </el-card>
    </div>
</template>

<script>
import { shopAuditAPI, shopAuditListAPI } from '@/api/shop';
import dayjs from 'dayjs';
export default {
    data() {
        return {
            //定义一个搜索出来的对象赋值给这个对象
            shopData: {},
            //分页的参数
            currentPage: 1,
            pageSize: 10,
            total: 0,
            //将搜索出来的商家信息数据展示在表格中
            tableData: [],
        };
    },
    methods: {
        handleSizeChange() {
            this.loadShopList();
        },
        handleCurrentChange() {
            this.loadShopList();
        },
        //获取所有商家信息的方法
        loadShopList() {
            shopAuditListAPI({
                ...this.shopData,
                currentPage: this.currentPage,
                pageSize: this.pageSize,
            }).then(resp => {
                this.total = resp.data.total;
                this.tableData = resp.data.datas;

            });
        },
        // 点击审核按钮
        handleAudit(row) {
            shopAuditAPI({
                shopId: row.shopId,
                status: 1,
            }).then((resp) => {
                if (resp.data == 1) {
                    this.loadShopList();
                }
            });
        },
        // 点击退审按钮
        handleEdit(row) {
            shopAuditAPI({
                shopId: row.shopId,
                status: 0,
            }).then((resp) => {
                if (resp.data == 1) {
                    this.loadShopList();
                }
            });
        },
        // 点击违规停业按钮
        handleFoul(row) {
            shopAuditAPI({
                shopId: row.shopId,
                status: 4,
            }).then((resp) => {
                if (resp.data == 1) {
                    this.loadShopList();
                }
            });
        },
        // 格式化数据的方法
        formatDate(a) {
            return dayjs(a).format("HH:mm:ss");
        },
    },
    created() {
        this.loadShopList();
    },
}
</script>

<style scoped></style>